<%- include('../layout') %>

<% contentFor('body') { %>
<% currentPath = '/animals' %>
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>动物管理</h2>
    <a href="/admin/animals/add" class="btn btn-success">
      <i class="fa fa-plus"></i> 添加动物
    </a>
  </div>
  
  <!-- 搜索框 -->
  <div class="card mb-4">
    <div class="card-body">
      <form action="/admin/animals" method="get" class="row g-3">
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="搜索动物名称" name="search" value="<%= search || '' %>">
        </div>
        <div class="col-md-3">
          <select class="form-select" name="categoryId">
            <option value="">所有分类</option>
            <% categories.forEach(category => { %>
            <option value="<%= category.id %>" <%= categoryId == category.id ? 'selected' : '' %>><%= category.name %></option>
            <% }); %>
          </select>
        </div>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary w-100">搜索</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 动物列表 -->
  <div class="card">
    <div class="card-body">
      <% if (animals.length > 0) { %>
      <div class="row">
        <% animals.forEach(animal => { %>
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img src="<%= animal.imageUrl %>" class="card-img-top" style="height: 200px; object-fit: cover;" alt="<%= animal.name %>">
            <div class="card-body">
              <h5 class="card-title"><%= animal.name %></h5>
              <p class="card-text text-sm">
                <span class="badge" style="background-color: <%= animal.category?.color || '#6c757d' %>">
                  <%= animal.category?.name || '未分类' %>
                </span>
              </p>
              <p class="card-text text-sm text-muted">
                <%= animal.shortDescription?.substring(0, 50) %><%= animal.shortDescription && animal.shortDescription.length > 50 ? '...' : '' %>
              </p>
              <div class="d-flex justify-content-between mt-3">
                <a href="/admin/animals/<%= animal.id %>/images" class="btn btn-sm btn-info">
                  <i class="fa fa-picture-o"></i> 图片管理
                </a>
                <div class="btn-group">
                  <a href="/admin/animals/edit/<%= animal.id %>" class="btn btn-sm btn-primary">编辑</a>
                  <a href="/admin/animals/delete/<%= animal.id %>" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除该动物吗？')">删除</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <% }); %>
      </div>
      
      <!-- 分页 -->
      <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
          <li class="page-item <%= pagination.currentPage === 1 ? 'disabled' : '' %>">
            <a class="page-link" href="/admin/animals?page=<%= pagination.currentPage - 1 %>&search=<%= search || '' %>&categoryId=<%= categoryId || '' %>">上一页</a>
          </li>
          <% for (let i = 1; i <= pagination.totalPages; i++) { %>
          <li class="page-item <%= i === pagination.currentPage ? 'active' : '' %>">
            <a class="page-link" href="/admin/animals?page=<%= i %>&search=<%= search || '' %>&categoryId=<%= categoryId || '' %>"><%= i %></a>
          </li>
          <% } %>
          <li class="page-item <%= pagination.currentPage === pagination.totalPages ? 'disabled' : '' %>">
            <a class="page-link" href="/admin/animals?page=<%= pagination.currentPage + 1 %>&search=<%= search || '' %>&categoryId=<%= categoryId || '' %>">下一页</a>
          </li>
        </ul>
      </nav>
      <% } else { %>
      <p class="text-center text-muted">暂无动物数据</p>
      <% } %>
    </div>
  </div>
</div>
<% } %>